import React, { useState, useEffect, useContext } from 'react';
import { TextField, Select, MenuItem } from '@mui/material';
import WorkflowContext from 'contexts/WorkflowContext';
import axios from 'utils/axios';
import CustomAutocomplete from 'components/ui-component/extended/Workflow/CustomAutocomplete';
import { findIndexByField } from 'utils/arrayHelpers'; // 根据实际路径导入
import { fetchAuthByPlatform } from 'service/workflowService';
// 动态字段组件
const DynamicField = (props) => {
  const { displayType, dataRange, stepIndex, fieldId, isRequired, isComplexType, nestIndex, pValue } = props;
  const [remoteOptions, setRemoteOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  // WorkflowContext 中的方法
  const { updateFieldForInput, updateFieldForDropdown } = useContext(WorkflowContext);

  // 仅在 displayType 为 'input' 时使用 pValue 作为默认值
  const [inputDefaultValue, setInputDefaultValue] = useState(displayType === 'input' ? pValue : '');
  // 当 displayType 为 'dropdown' 并且 pValue 存在时，找到默认选项的索引值
  let initialSelectedValue = '';
  if (displayType === 'dropdown' && dataRange && dataRange.type === 'local' && pValue !== undefined) {
    const options = dataRange?.type === 'local' ? dataRange.options : remoteOptions;
    const defaultIndex = findIndexByField(options, 'content', pValue);
    console.log('777777777777777TEXT@@', dataRange);
    if (defaultIndex !== -1) {
      initialSelectedValue = defaultIndex;
      options[defaultIndex].pValue = initialSelectedValue;
      // updateFieldForDropdown(stepIndex, fieldId, initialSelectedValue, isComplexType, nestIndex);
    }
  }
  // 使用找到的索引值作为默认选项
  const [selectedValue, setSelectedValue] = useState(initialSelectedValue);
  // 从远程获取数据
  const fetchData = async () => {
    setIsLoading(true);
    try {
      const { url, ...queryParams } = dataRange.options;
      const { data } = await fetchAuthByPlatform(url, queryParams);
      setRemoteOptions(data);
    } catch (error) {
      console.error('Failed to fetch data: ', error);
      // 错误处理逻辑，例如设置错误状态
    } finally {
      setIsLoading(false);
    }
  };
  // 当 dataRange 变更时获取远程数据
  useEffect(() => {
    if (dataRange?.type === 'remote') {
      fetchData().catch((error) => {
        // 错误处理逻辑
        console.error('Failed to fetch data: ', error);
      });
    }
  }, []);

  // 输入字段变化处理
  const handleInputChange = (event) => {
    // console.log('@@@@@@@@@@@@@handleInputChange', event.target);
    updateFieldForInput(stepIndex, fieldId, event.target.value);
  };

  // 下拉选择变化处理
  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
    updateFieldForDropdown(stepIndex, fieldId, event.target.value, isComplexType, nestIndex);
  };
  // 新增的 useEffect 钩子
  useEffect(() => {
    if (initialSelectedValue !== '') {
      console.log('initialSelectedValue@@@@@@@@');
      updateFieldForDropdown(stepIndex, fieldId, initialSelectedValue, isComplexType, nestIndex);
    }
  }, [initialSelectedValue]);

  // 创建MenuItem的函数
  // 创建MenuItem的函数
  const renderMenuItems = (options, key) => {
    if (!options) {
      return null; // 或者返回一个空数组 []
    }
    return options.map((option, index) => {
      const uniqueKey = option.id || index; // 使用 id 或 index 作为 key
      return (
        <MenuItem key={uniqueKey} value={index}>
          {option[key]}
        </MenuItem>
      );
    });
  };

  const getOptions = () => (dataRange?.type === 'local' ? dataRange.options : remoteOptions);

  switch (displayType) {
    case 'dropdown':
      return (
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={isLoading ? '' : selectedValue} // 修改的地方
          fullWidth
          onChange={handleSelectChange}
          error={isRequired && !selectedValue}
        >
          {isLoading ? (
            <MenuItem disabled>正在加载中...</MenuItem>
          ) : (
            renderMenuItems(
              getOptions(),
              dataRange?.type === 'local' ? 'title' : dataRange.options.showLabel // 使用 showLabel
            )
          )}
        </Select>
      );

    case 'input':
      return <CustomAutocomplete stepIndex={stepIndex} onBlur={handleInputChange} defaultValue={inputDefaultValue} />;

    default:
      return null;
  }
};

export default DynamicField;
